import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { AntDesign } from "@expo/vector-icons";

const SampleVillageCard = ({
  item,
  onPress,
  isDelete,
  onDeleted,
  deletedId,
  isSelect,
  onPressItem, //选择样本村
  isVisible,
}) => {
  return (
    <View style={styles.container}>
      {isDelete && (
        <TouchableOpacity
          onPress={() => onDeleted(item._id)}
          style={styles.deleteOption}
        >
          {item._id === deletedId ? (
            <AntDesign name="closecircleo" size={18} color="red" />
          ) : (
            <AntDesign name="closecircleo" size={18} color="#aaa" />
          )}
        </TouchableOpacity>
      )}
      <TouchableOpacity style={styles.card} onPress={onPress}>
        <View style={styles.top}>
          <Text style={{ fontSize: 18 }}>第{item.group}组:</Text>
          <Text style={{ fontSize: 16, color: "#555" }}>{item.date}</Text>
        </View>

        <View style={styles.middle}>
          <Text style={styles.middleText}>{item.province}</Text>
          <Text style={styles.middleText}>{item.city}</Text>
          <Text style={styles.middleText}>{item.area}</Text>
        </View>

        <View style={styles.middle}>
          <Text style={styles.middleText}>{item.street}</Text>
          <Text style={styles.middleText}>{item.village}</Text>
        </View>

        <View style={styles.bottom}>
          <View style={styles.bottomLeft}>
            {isVisible && (
              <View
                style={[
                  styles.tag,
                  {
                    backgroundColor:
                      item.type === "publishing" ? "#A9D67C" : "#ccc",
                    borderRadius: 1,
                  },
                ]}
              >
                <Text style={styles.tagText}>
                  {item.type === "publishing" ? "已发布" : "未发布"}
                </Text>
              </View>
            )}
          </View>

          <View style={styles.bottomRight}>
            <View style={styles.tag}>
              <Text style={styles.tagText}>{item.property}</Text>
            </View>
            <View style={[styles.tag, { backgroundColor: "#F47C68" }]}>
              <Text style={styles.tagText}>{item.researchType}</Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
      {isSelect && (
        <TouchableOpacity
          style={styles.selectOption}
          onPress={() => onPressItem(item._id)}
        >
          {item.checked === true ? (
            <AntDesign name="checkcircleo" size={20} color="green" />
          ) : (
            <AntDesign name="checkcircleo" size={20} color="#aaa" />
          )}
        </TouchableOpacity>
      )}
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    flexDirection: "row",
  },
  card: {
    backgroundColor: "#fff",
    borderRadius: 2,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 4,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
    padding: 10,
    marginVertical: 5,
    flex: 1,
  },
  top: {
    flexDirection: "row",
    justifyContent: "space-between",
    margin: 5,
  },
  middle: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginTop: 5,
    marginBottom: 5,
  },
  middleText: {
    fontSize: 16,
    // fontWeight: "bold",
    color: "#2b2b2b",
  },
  bottom: {
    flexDirection: "row",
    justifyContent: "space-between",
    // margin: 5,
    marginTop: 10,
  },
  bottomRight: {
    flexDirection: "row",
    justifyContent: "flex-end",
    marginHorizontal: 5,
  },
  bottomLeft: {
    flexDirection: "row",
    marginLeft: 5,
  },
  tag: {
    backgroundColor: "#8ABAFF",
    padding: 2,
    paddingLeft: 4,
    paddingRight: 4,
    borderRadius: 5,
    marginRight: 5,
  },
  tagText: {
    color: "#fff",
    fontSize: 14,
  },
  selectOption: {
    justifyContent: "center",
    paddingLeft: 5,
  },
  deleteOption: {
    justifyContent: "center",
    paddingRight: 10,
  },
});

export default SampleVillageCard;
